<template>
  <view class="package" style="padding-bottom: 5rpx">
    <view>请选择最优惠的支付方式</view>
    <picker-view :value="valueNum" @change="bindChange" class="picker-view">
      <picker-view-column>
        <view class="item center" v-for="(item,index) in empowerList" :key="index" 
		:style="{display:state==='takeOut'&&item.type==='shiwu'?'none':'flex'}">
          <view class="column left" style="width:50%">
            <text>{{item.title}}</text>
            <text v-if="index!=empowerList.length-1">{{item.name}}</text>
          </view>
          <view class="direction-start" style="width:50%">
            <text
              v-if="index!=empowerList.length-1">{{item.virtually?'虚拟余额':item.type==='shiwu'?'存量':'余额'}}：{{item.money}}{{item.type==='shiwu'?'公斤':''}}</text>
            <text v-if="item.type==='shiwu'"></text>
            <text v-else>单价：{{item.price}}</text>
          </view>
        </view>
      </picker-view-column>
    </picker-view>
  </view>
  <view class="package C_code">
    <view class="" v-if="type !== 'serve'" :style="{opacity:styleType==='shiwu'?'0.5':'1'}">加注金额</view>
    <view class="space-between moneys" v-if="type !== 'serve'" :style="{opacity:styleType==='shiwu'?'0.5':'1'}">
      <text v-for="(item, index) in listNumber" :key="index" @click="tab(index, item.num)" :style="{
          background: item.num === num ? '#1B91FF' : '',
          color: item.num === num ? '#fff' : '',
        }">
        {{ item.num }}
      </text>
      <text @click="tab(5, 0)"
        :style="{ background: Select === 5 ? '#1B91FF' : '', color: Select === 5 ? '#fff' : '' }">
        自定义
      </text>
    </view>
    <view class="package space-between " style="box-shadow: 0px 0px 51rpx 0px rgba(179, 179, 179, 0.25);width:100%">
      <view class="column" style="margin-bottom: 0px;width:60%;" :style="{opacity:styleType==='shiwu'?'0.5':'1'}">
        <view class="center" style="color:#457AFD ">
          <text>￥</text>
          <text style="font-size: 46rpx;" v-if="type !== 'serve'">{{ num }}</text>
          <text style="font-size: 46rpx;" v-else>{{money}}</text>
        </view>
        <view>加注量：{{FillingAmount?FillingAmount:'--'}}公斤</view>
      </view>
      <view class="payfor" @click="payFor()" v-if="sufficient===1">去支付</view>
      <view class="payfor" v-else-if="sufficient===2" style="opacity: 0.5;" @click="showToast('当前账户余额不足')">余额不足</view>
      <view class="payfor" @click="recharge()" v-if="sufficient===3">去充值</view>
    </view>
    <view class="space-between" style="color: #666; font-size: 24rpx;margin-top:15rpx"
      :style="{opacity:styleType==='shiwu'?'0.5':'1'}">
      <text>按实际加注量结算，余额原路退还</text>
      <text class="payfor" style="width:150rpx;height:60rpx;line-height: 60rpx;border-radius: 30rpx;font-size: 26rpx;"
        @click="recharge()" v-if="ample">去充值>></text>
    </view>
  </view>
  <view style="width:96%;margin:15rpx auto;" v-if="content">{{content}}</view>
  <view style="width:10rpx;height:1rpx"></view>
  <!-- 自定义输入 -->
  <CustomInput ref="CustomInputRef" @moneyInfo="moneyInfo" :fill_price="fill_price" @delFilling="delFilling"
    @sureFilling="sureFilling"></CustomInput>
  <!-- 不能支付 -->
  <uni-popup ref="proupPay" type="center">
    <view class="popup" @click="telCall('400-109-1606')">
      <text>充值</text>
      <text>{{text}}</text>
    </view>
  </uni-popup>
  <!-- 分拨账户 -->
  <uni-popup ref="batches" type="center">
    <view class="popup" v-if="Allocation">
      <text>{{Allocation.name}}</text>
      <text>{{Allocation.content}}</text>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import CustomInput from '@c/canCode/customInput.vue';
  import { telCall } from '@/utils/copyText';
  import { customList } from '@/gql/filling';
  import { showToast, showLoading } from '@/utils/prompt';
  import { onShow } from '@dcloudio/uni-app';
  import { getDriverID } from '@/stores/driverID';
  import { toPublish } from '@mqtt';
  import { ref } from 'vue';
  import { navTo } from '@/utils/navigator';
  /**
   * 选择加注金额
   * @property {Array} listNumber 选择加注金额列表
   * @property {Number} num 默认加注金额
   * @property {Boolean} show 是否弹出自定义金额
   * @property {Number} Select 选择加注金额的索引
   * @property {Null} payees 待付款人组件
   * @property {Null} CustomInputRef 自定义输入组件
   */
  const props = defineProps({
    money_price: { type: Number },
    wechat_price: { type: Number },
    fleet_price: { type: Number },
    wechat_amount: { type: Number },
    money_amount: { type: Number },
    fleet_amount: { type: Number },
    Pricegroup: { type: Object },
    teamID: { type: String, default: '0', },
    userID: { type: Number },
    type: { type: String },
    money: { type: Number },
    code: { type: String },
    state: { type: String },
  });
  const driver_id = getDriverID();
  const listNumber = [{ num: 15 }, { num: 30 }, { num: 50 }, { num: 100 }, { num: 200 }];
  const num = ref(15);
  const show = ref(false); //是否弹出自定义金额
  const Select = ref(0); //选中加注金额
  // refs
  const CustomInputRef = ref(null);

  const valueNum = ref([0]);
  const empowerList = ref([])
  const FillingAmount = ref()  //加注量
  const fill_price = ref() //支付单价
  const styleType = ref('') //支付方式
  const proupPay = ref(null) //禁止充值提示框
  const text = ref('') //禁止充值提示文字
  const content = ref('') //老板账户说明
  const sufficient = ref(1) //是否足够加注1足够加注2不能加注3个人账户不足去充值
  const ample = ref(false) //个人是否足够加注
  const batches = ref(null) //分拨账户说明提示弹框
  const Allocation = ref() //分拨账户说明提示文字
  const moneyPay = ref() //支付金额
  const emit = defineEmits(['sureFilling', 'activeTab', 'getdrivers', 'payForSub']);
  onShow(() => {
    num.value = 15;
    Select.value = 0;
    emit('getdrivers', 15);
  });
  /**
   * 获取授权账户列表
   */
  function customLists() {
    showLoading();
    const fill_id = uni.getStorageSync('fillingID') ? uni.getStorageSync('fillingID').toString() : '0'
    const team_id = Number(props.teamID)
    const pubMsg = {
      query: customList,
      variables: {
        money: 15,
        driver_id: props.type == 'serve' ? Number(props.userID) : driver_id,
        fill_id,
        code: props.code ? props.code : '0371',
        team_id
      },
    };
    toPublish('ql/driver/getPayeeList', pubMsg, (obj : any) => {
      const data = obj.data;
      // data.empower_list_for_me.map((item : any) => item.price = '--')
      empowerList.value = data.empower_list_for_me;
      styleType.value = data.empower_list_for_me[0].type
      addBoss()
    });
  }
  function addBoss() {
    const boss = {
      title: '老板账户',
      name: '虚拟用户',
      money: '8000',
      msg: '您当前暂无老板账户，该老板账户为虚拟金额，暂不可用',
      type: 'money',
      virtually: true,
      cate: 3,
      money_id: 0
    }
    var objs = {}
    const BossAccount = empowerList.value.find((item) => item.cate === 3)
    Allocation.value = empowerList.value.find((item) => item.cate === 4)
    if (!BossAccount && !Allocation.value) {
      empowerList.value.unshift(boss)
      objs = { "detail": { "value": [1] } }
    } else if (!BossAccount && Allocation.value) {
      empowerList.value.splice(1, 0, boss)
      objs = { "detail": { "value": [0] } }
    } else {
      objs = { "detail": { "value": [0] } }
    }
    empowerList.value.map((item : any) => {
      switch (item.type) {
        case 'fenbo':
          item.price = props.Pricegroup.fenbo_price
          break;
        case 'money':
          item.price = props.money_price
          break;
        case 'wechat':
          item.price = props.wechat_price
          break;
      }
    })
    if (props.money_price) {
      bindChange(objs)
    }
  }
  /**
   * 滑动
   * @param {Object} e  滑动信息
   */
  function bindChange(e : any) {
    moneyPay.value = props.type == 'serve' ? props.money : num.value
    valueNum.value = e && e.detail ? e.detail.value : valueNum.value
    const typeState = empowerList.value[valueNum.value]
    if (empowerList.value.length < 1 && !typeState) {
      return
    }
    styleType.value = typeState.type
    content.value = typeState.msg
    switch (typeState.type) {
      case 'fenbo':
        FillingAmount.value = props.Pricegroup.fenbo_amount
        fill_price.value = Number(props.Pricegroup.fenbo_price)
        emit('activeTab', typeState.money_id, typeState.type);
        if (typeState.money < moneyPay.value) {
          sufficient.value = 2
          batches.value.open()
        } else {
          batches.value.close()
          sufficient.value = 1
        }
        break;
      case 'fleet':
        FillingAmount.value = props.fleet_amount
        fill_price.value = Number(props.fleet_price)
        emit('activeTab', typeState.money_id, typeState.type);
        if (typeState.money < moneyPay.value) {
          sufficient.value = 2
          ample.value = typeState.money_id === driver_id ? true : false
        } else if (typeState.money_id === 0) {
          sufficient.value = 2
        } else {
          sufficient.value = 1
          ample.value = false
        }
        break;
      case 'money':
        FillingAmount.value = props.money_amount
        fill_price.value = Number(props.money_price)
        console.log(JSON.stringify(typeState) + '***************')
        emit('activeTab', typeState.money_id, typeState.type);
        if (typeState.title == '个人账户' && typeState.money < moneyPay.value) {
          sufficient.value = props.state === 'takeOut' ? 2 : 3
          ample.value = typeState.money_id === driver_id ? true : false
          return
        }
        if (typeState.money < moneyPay.value) {
          sufficient.value = 2
          // ample.value = typeState.money_id === driver_id ? true : false
          ample.value = false
        } else if (typeState.money_id === 0) {
          sufficient.value = 2
        } else {
          sufficient.value = 1
          ample.value = false
        }
        break;
      case 'wechat':
        sufficient.value = 1
        ample.value = false
        FillingAmount.value = props.wechat_amount
        fill_price.value = Number(props.wechat_price)
        emit('activeTab', 0, typeState.type);
        break;
      case 'shiwu':
        sufficient.value = 1
        ample.value = false
        emit('activeTab', 0, typeState.type);
        break;

    }
  }
  /**
   * 计算金额
   * @param {Object} nums  输入金额信息
   */
  function moneyInfo(nums : any) {
    const Fills = nums.__v_isShallow === false ? 0 : nums;
    num.value = Fills ? Number(Fills) : 0;
    Select.value = nums == 15 ? 0 : nums == 30 ? 1 : nums == 50 ? 2 : nums == 100 ? 3 : nums == 200 ? 4 : 5;
    emit('getdrivers', num.value);
  }
  /**
   * 取消自定义输入
   */
  function delFilling() {
    CustomInputRef.value.close();
    show.value = false;
  }
  /**
   * 确认自定义输入信息
   */
  function sureFilling() {
    CustomInputRef.value.close();
    show.value = false;
  }
  /**
   * 选中自定义金额
   * @param {Number} nums  选中的索引位置
   * @param {Number} money  选中的金额
   */
  function tab(nums : number, money : number) {
    Select.value = nums;
    if (nums === 5) {
      CustomInputRef.value.open();
      show.value = true;
    } else {
      moneyInfo(money);
      num.value = money;
    }
  }
  /**
   * 余额不足去充值
   */
  function recharge() {
    const pubMsg = {
      driver_id: driver_id,
    };
    toPublish('driver/getIsRecharge', pubMsg, (obj : any) => {
      const { code, msg } = obj;
      text.value = msg
      if (code === 1) {
        payFor('Recharge')
        // navTo('mine/Recharge?type=' + styleType.value + '&amount=' + FillingAmount.value + '&price=' + fill_price.value)
      } else {
        proupPay.value.open()
      }
    });
  }
  /**
   * 确认支付
   */
  function payFor(type : any) {
    if (!fill_price.value && styleType.value !== 'shiwu') {
      setTimeout(() => {
        payFor()
      }, 1000)
      return
    }
    emit("payForSub", styleType.value, FillingAmount.value, fill_price.value, type)
  }
  defineExpose({ moneyInfo, customLists, bindChange, num });
</script>

<style lang="less">
  .left {
    text {
      width: 200px;
      white-space: nowrap;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .C_code {
    box-shadow: 0 0 1.59375rem rgba(179, 179, 179, 0.25);

    .moneys {
      flex-wrap: wrap;

      text {
        width: 204rpx;
        height: 80rpx;
        background: #ffffff;
        box-shadow: 0px 0px 51rpx 0px rgba(179, 179, 179, 0.25);
        border-radius: 5px;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #217ce3;
        text-align: center;
        line-height: 80rpx;
        margin-top: 20rpx;
      }
    }
  }

  .payfor {
    width: 182rpx;
    height: 78rpx;
    background: #457AFD;
    border-radius: 5px;
    font-size: 30rpx;
    font-family: SimHei;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    line-height: 78rpx;
  }

  .picker-view {
    width: 100%;
    height: 260rpx;
  }

  .item {
    line-height: 25px;
    text-align: center;
  }

  .popup {
    width: 600rpx;
    margin: 0px auto;
    background-color: white;
    border-radius: 5px;
    padding: 30rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    text:nth-of-type(1) {
      margin-bottom: 20rpx;
    }
  }
</style>
<style>
  .picker-view>>>.uni-picker-view-indicator {
    height: 60px !important;
  }
</style>